<template>
  <x-skeleton style="background-color: #eeeeee; padding: 100rpx 10rpx 0 10rpx">
    <x-fixed ref="x-fixed" placeholder="true" :interval="70">
      <x-tabs :flex="true" :active="queryParam.orderStatus" :list="tabs" underline @change="onChangeTab"/>
    </x-fixed>
    <view v-if="orderList.length > 0" class="order-list">
      <view v-for="(item,index) in orderList" :key="index" class="item" @click="onOrderDetail(item,index)">
        <view class="header flex">
          <view class="flex flex1 align-center">
            <view class="store-img">
              <x-image :src="MeBg"/>
            </view>
            <text class="store-name">中华大店铺</text>
          </view>
          <view class="status">{{ orderStatusText(item) }}</view>
        </view>
        <view class="goods">
          <view style="padding-bottom: 12rpx;">
            <goods-info :detail="item"/>
          </view>
          <view class="total">
            <text class="count">共{{ item.buyNum }}件商品</text>
            <text class="price">总价: ¥{{ item.actualPrice }}</text>
            <text class="pay">
              {{ [0, 4].includes(item.orderStatus) ? '需付款：' : '实付款：' }}
              <text class="blod">
                <text class="font-24" style="margin-right: 2rpx;">¥</text>
                {{ item.actualPrice }}
              </text>
            </text>
          </view>
          <view class="bottom">
            <!-- orderType		订单类型：1-普通订单；2-拼团订单 -->
            <view class="btn" v-if="item.orderStatus === 0">
              <x-button type="default" plain @click="changeAddress(item)">修改地址</x-button>
            </view>
            <view class="btn" v-if="item.orderStatus === 0">
              <x-button type="default" plain @click="cancelOrder(item)">取消订单</x-button>
            </view>
            <view class="btn" v-if="item.orderStatus === 0">
              <x-button plain @click="onPay(item,index)">立即支付</x-button>
            </view>
            <view class="btn" v-if="item.expressNo">
              <x-button type="default" plain @click="onLogistics(item,index)">查看物流</x-button>
            </view>
            <view class="btn" v-if="[1, 3, 4].some(s => s === item.orderStatus)">
              <x-button plain @click="onAgainBuy(item,index)">再来一单</x-button>
            </view>
            <view class="btn" v-if="item.orderStatus === 2 && item.closeStatus !== 6">
              <x-button plain @click="onReceived(item,index)">确认收货</x-button>
            </view>
            <view class="btn apprise" v-if="item.orderStatus === 3 && item.commentStatus === 0">
              <x-button plain @click="handleChangeComment(item,index)">评价</x-button>
            </view>
          </view>
        </view>
        <!--退款售后，发货后退货-->
      </view>
      <view class="isOver" v-if="isEnd">-----我是有底线的-----</view>
    </view>
    <view v-else class="m-empty">
      <view class="_img">
        <x-image :src="NoOrder" mode="widthFix"/>
      </view>
      <view class="_text">未查询到订单信息</view>
    </view>
  </x-skeleton>
</template>

<script setup>
import XImage from '@/components/x-image.vue';
import XFixed from '@/components/x-fixed.vue';
import XTabs from '@/components/x-tabs.vue';
import XSkeleton from '@/components/x-skeleton.vue'
import XButton from '@/components/x-button.vue';
import GoodsInfo from './components/goods-info.vue'
import NoOrder from '@/assets/images/no-order.png'
import MeBg from '@/assets/images/me-bg.png'
import {reqOrderList} from "@/api";
import {ref} from "vue";
import {onLoad, onReachBottom} from "@dcloudio/uni-app";

const tabs = [
  {name: '全部', value: -1},
  {name: '待付款', value: 1},
  {name: '待发货', value: 2},
  {name: '待收货', value: 3},
  {name: '待评价', value: 4},
  {name: '待评价', value: 5},
  {name: '已退款', value: 6}
]

const queryParam = ref({
  orderStatus: -1,
  pageNum: 1,
  pageSize: 12
})
const orderList = ref([])

let isLoading = false, isEnd = ref(false)

function orderStatusText(item) {
  switch (item.orderStatus) {
    case 0:
      return '待买家付款';
    case 1:
      return '待商家发货';
    case 2:
      return '商家已发货';
    case 3:
      return '交易成功';
    case 4:
      return '交易关闭';
  }
}

function onChangeTab(item) {
  queryParam.value.orderStatus = item
  queryParam.value.pageNum = 1
  orderList.value = []
  getOrderList()
}

function onOrderDetail(item, index) {
  uni.navigateTo({url: '/pages/order/detail?id=' + item.orderId})
}

async function getOrderList() {
  isLoading = true
  const res = await reqOrderList(queryParam.value)
  if (!res.data || res.data.length < 12) {
    isEnd.value = true
  }
  if (res.data) {
    orderList.value = [...orderList.value, ...res.data]
  }
  isLoading = false
}

onReachBottom(() => {
  if (isLoading) {
    return
  }
  if (isEnd.value) {
    return uni.showToast({
      title: '到底了！',
    })
  }
  queryParam.pageNum += 1
  getOrderList()
})
onLoad(async (options) => {
  if (options.status) {
    queryParam.value.orderStatus = Number(options.status)
  }
  await getOrderList()
  const token = uni.getStorageSync('TOKEN')
  if (!token) {
    await uni.navigateTo({url: '/pages/login'})
  }
})
</script>

<style lang="scss" scoped>
.order-list {
  .item {
    border-radius: 20rpx;
    margin-top: 16rpx;
    display: flex;
    background: #FFFFFF;
    flex-direction: column;

    .header {
      padding: 28rpx;
      align-items: center;
      font-size: 28rpx;
      color: $uni-color-default;

      .store-img {
        width: 50rpx;
        height: 50rpx;
        border-radius: 2rpx;
        background: #FFE4E4;
        overflow: hidden;
      }

      .store-name {
        margin-left: 14rpx;
        font-size: 30rpx;
        font-weight: bold;
      }

      .status {
        font-weight: bold;
      }
    }

    .goods {
      .info {
        display: flex;
        padding: 0 24rpx;

        .pic {
          width: 160rpx;
          height: 160rpx;
          border-radius: 6rpx;
          background: #FFE4E4;
          overflow: hidden;
        }

        .content {
          display: flex;
          flex-direction: column;
          flex: 1;
          margin-left: 16rpx;

          .goods-name {
            font-size: 28rpx;
            color: $uni-color-default;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .spec {
            margin-top: 8rpx;
            font-size: 24rpx;
            color: $uni-color-info;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }

        .refund-status {
          text-align: right;
          font-size: 24rpx;
          color: $uni-color-primary;
        }

        .rt-price-num {
          margin-left: 30rpx;
          text-align: right;

          .price {
            font-size: 28rpx;
            color: $uni-color-default;
          }

          .num {
            font-size: 24rpx;
            color: $uni-color-info;
          }
        }
      }

      .total {
        border-top: 1rpx solid #E5E5E5;
        padding: 24rpx 24rpx;
        text-align: right;
        font-size: 28rpx;
        color: $uni-color-info;

        .count {
          margin-right: 12rpx;
        }

        .price {
          margin-right: 12rpx;
        }

        .pay {
          color: $uni-color-default;
        }
      }

      .total-refund {
        border-top: 1rpx solid #E5E5E5;
        padding: 16rpx 24rpx;
        text-align: left;
        font-size: 28rpx;
        color: $uni-color-secondary;
        //display: flex;
        ._status {
          display: flex;
        }
      }

      .bottom {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 24rpx 28rpx;
        flex-wrap: wrap;

        .btn {
          width: 172rpx;
          margin-left: 16rpx;
        }

        .apprise {
          width: 144rpx;
        }

        .invite {
          background: $uni-bg-color-message;
          padding: 12rpx 16rpx;
          display: flex;
          align-items: center;
          flex: 1;

          .lf {
            color: $uni-color-default;
            font-size: 28rpx;
          }

          .share {
            width: 180rpx;
          }
        }
      }
    }
  }
}

.m-empty {
  padding-top: 60rpx;

  ._img {
    margin: 0 auto;
    width: 160rpx;
  }

  ._text {
    margin-top: 20rpx;
    color: #646464;
    font-size: 32rpx;
    text-align: center;
  }

  .no-order-goods-list {
    padding: 24rpx;

  }
}

.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}

.align-center {
  align-items: center;
}

.margin-rt20 {
  margin-right: 20rpx;
}

.font-20 {
  font-size: 20rpx;
}

.font-24 {
  font-size: 24rpx;
}

.font-28 {
  font-size: 28rpx;
}

.blod {
  font-weight: bold;
  font-size: 32rpx;
}

.red {
  color: $uni-color-primary;
}

.message-color {
  color: $uni-text-color-message;
}

.isOver {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 28rpx;
}
</style>
